<template>
  <div>
    <h2>保险产品分类</h2>
    
    <!-- <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"> -->
    <el-tabs type="card" closable>
      <el-tab-pane
        v-for="(item, index) in pageData.data"
        :key="item._id"
        :label="item.categoryName"
        :name="item._id"
      >{{item.categoryName}}
        
      </el-tab-pane>
    </el-tabs>
    <!-- table -->
  
    <el-table
      :data="pageData.data.filter(data => !search || data.categoryName.toLowerCase().includes(search.toLowerCase()))"
      border 
      style="width: 100%"
    >
      <el-table-column label="编号" prop="_id"></el-table-column>
      <el-table-column label="类别" prop="categoryName"></el-table-column>
      <el-table-column label="生成时间" prop="opentime"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="getcategoryid1(scope.row._id)">Edit</el-button>
          <el-button size="mini" type="danger" @click="delectone1(scope.row._id)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
        <Page></Page>
    
  </div>
  </div>
</template>

<script>
import Category from "./Cascader.vue";
import Page from "../page/categorypage.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions ,mapMutations} = createNamespacedHelpers("productcategory");

export default {
  components: {
    Category,Page
  },
  data() {
    return {
      activeName: "first",
      val1: "",
      tabIndex: 2,
      search: "",
    };
  },
  computed: {
    ...mapState(["pageData", "update", "searchdata"]),
  },
  created() {
    this.showCategorys();
  },
  methods: {
    ...mapActions(["showCategorys", "delectone", "getcategoryid"]),
     //切换页数
    changeshowpage1() {
      this.changeshowpage();
      this.getstudents();
    },
  //删除单个种类
    delectone1(_id) {
      this.delectone(_id);
    },
    //获取要修改的种类的id
    getcategoryid1(_id) {
      this.getcategoryid(_id);
        this.$router.push("/system/changecategory");
    },
    //搜索
    searchcategory() {
      console.log(this.searchdata);
      this.showCategorys(this.searchdata);
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
  handleEdit(index, row) {
    console.log(index, row);
  },
  handleDelete(index, row) {
    console.log(index, row);
  },
  addTab(targetName) {
    let newTabName = ++this.tabIndex + "";
    this.editableTabs.push({
      title: "New Tab",
      name: newTabName,
      content: "New Tab content",
    });
    this.editableTabsValue = newTabName;
  },
  removeTab(targetName) {
    let tabs = this.editableTabs;
    let activeName = this.editableTabsValue;
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          let nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        }
      });
    }

    this.editableTabsValue = activeName;
    this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
  },
};
</script>